<template>
  <el-tabs class="tabs" v-model="currTab" :tab-position="position" @tab-click="onTabClick">
    <el-tab-pane v-for="item in tabList" :key="item" :label="item" :name="item" />
  </el-tabs>
</template>

<script setup>
const emits = defineEmits(['tabClick'])
const props = defineProps({
  tabList: {
    type: Array,
    default: () => []
  },
  position: {
    type: String, // 'left' | 'right'
    default: 'left',
  }
})

const currTab = defineModel();

const onTabClick = () => {
  emits('tabClick', currTab.value)
}
</script>

<style lang="scss" scoped>
.tabs {
  width: var(--ycy-side-bar-width);
  height: 100%;
  border-right: 1px solid var(--el-border-color);

  :deep(.el-tabs__header) {
    margin-right: 0;

    .el-tabs__nav-wrap:after {
      width: 0;
    }

    .el-tabs__item {
      user-select: none;
      writing-mode: vertical-rl;
      padding: var(--ycy-gap-extra-large) var(--ycy-gap-base);
      height: auto;
      letter-spacing: 2px;
      font-size: var(--el-font-size-base);
    }

    .el-tabs__active-bar {
      right: unset;
      left: 0;
    }
  }
  
  &.el-tabs--right {
    width: max-content;
    height: 100%;
    border-left: 1px solid var(--el-border-color);

    :deep(.el-tabs__header) {
      margin-left: 0;

      .el-tabs__nav-wrap:after {
        width: 0;
      }

      .el-tabs__item {
        user-select: none;
        writing-mode: vertical-rl;
        padding: var(--ycy-gap-extra-large) var(--ycy-gap-base);
        height: auto;
        letter-spacing: 2px;
        font-size: var(--el-font-size-base);
      }

      .el-tabs__active-bar {
        left: unset;
        right: 0;
      }
    }
  }
}
</style>